getAll returns all the todos for a given user. We attach the token as our authorization header for our axios request.

We then put the API URL into the axios.get method. Remember back in todobackend/api/urls.py we declared the

following endpoint for updating of todos:

Analyze Code

…

urlpatterns = [

path('todos/', views.TodoListCreate.as_view()),

…

This endpoint is served by the TodoListCreate view in todobackend/api/views.py (refer to chapter 6).

Analyze Code

createTodo(data, token){

axios.defaults.headers.common["Authorization"] = "Token " + token;

return axios.post("http://localhost:8000/api/todos/", data);

}

createTodo is similar to getAll. We attach the token and use the same API URL but because we are creating a todo,

we use the axios.post method. Note how with the same TodoListCreate API endpoint, by sending different HTTP

types (e.g. get, post), we can perform different operations.

Analyze Code

updateTodo(id, data, token){

axios.defaults.headers.common["Authorization"] = "Token " + token;

return axios.put(`http://localhost:8000/api/todos/${id}`, data);

}

updateTodo is similar except we use the axios.put method and append the todo’s id at the end of the API URL

endpoint. Remember back in todobackend/api/urls.py we declared the following endpoint for updating of todos:

Analyze Code

…

urlpatterns = [

path('todos/', views.TodoListCreate.as_view()),

path('todos/<int:pk>', views.TodoRetrieveUpdateDestroy.as_view()),

…

This endpoint is served by the TodoRetrieveUpdateDestroy view in todobackend/api/views.py (refer to chapter 8).

Analyze Code

deleteTodo(id, token){

axios.defaults.headers.common["Authorization"] = "Token " + token;

return axios.delete(`http://localhost:8000/api/todos/${id}`);

}

deleteTodo is similar to updateTodo except we use axios.delete. The same TodoRetrieveUpdateDestroy endpoint

performs different operations with different HTTP types (i.e. put, delete).

Analyze Code

completeTodo(id, token){

axios.defaults.headers.common["Authorization"] = "Token " + token;

return axios.put(`http://localhost:8000/api/todos/${id}/complete`);

}

completeTodo is similar too except we use the axios.put method (we update the completed Boolean variable) and

append the todo’s id with ‘complete’ at the end of the API URL endpoint. Remember back in

todobackend/api/urls.py we declare the following endpoint for completing of todos:

Analyze Code

…

urlpatterns = [

path('todos/', views.TodoListCreate.as_view()),

path('todos/<int:pk>', views.TodoRetrieveUpdateDestroy.as_view()),

path('todos/<int:pk>/complete', views.TodoToggleComplete.as_view()),

…

This endpoint is served by the TodoToggleComplete view in todoapproj/api/views.py (refer to chapter 9).

Analyze Code

login(data){

return axios.post("http://localhost:8000/api/login/", data);

}

signup(data){

return axios.post("http://localhost:8000/api/signup/", data);

}